<template>
  <view class="page">
    <!-- 轮播图 -->
    <view class="contain-box">
      <view class="contain-title">轮播图</view>
      <view class="contain-content">
        <cus-swiper-upload ref="SwiperUpload" name="Img" :imgs="fileImgs" :uploadUrl="uploadUrl"></cus-swiper-upload>
      </view>
    </view>

    <u-gap height="24rpx" bgColor="#F7F8FA"></u-gap>

    <view class="contain-box" v-if="!wxCheckType">
      <view class="contain-title">上传视频</view>
      <view class="contain-content">
        <cus-video-upload ref="VideoUpload" name="Img" :imgs="video" :uploadUrl="uploadUrl"></cus-video-upload>
      </view>
    </view>

    <u-gap height="24rpx" bgColor="#F7F8FA" v-if="!wxCheckType"></u-gap>

    <!-- 企业介绍 -->
    <view class="contain-box">
      <view class="contain-title">企业介绍</view>
      <view class="contain-content">
        <cu-editor ref="editor" :url="uploadUrl" :content="richtext"></cu-editor>
      </view>
    </view>

    <view class="submit-box">
      <u-button color="#276AEE" :loading="loading" throttleTime="500" :customStyle="{height:'88rpx',fontSize: '30rpx'}"
                @click="submit">提交
      </u-button>
    </view>

  </view>
</template>

<script>
import {mapGetters, mapState} from 'vuex'
import baseConfig from '@/config/baseUrl.js'
import cuEditor from '@/components/cu-editor/cu-editor'
import {handleHtmlImage} from '@/components/cu-editor/util'
import cusVideoUpload from '@/components/cus-video-upload/cus-video-upload'

export default {
  components: {cuEditor, cusVideoUpload},
  data() {
    return {
      uploadUrl: baseConfig.uploadUrl + '/sys/common/upload',
      id: '',
      richtext: '',
      fileImgs: '',
      video: '',
      loading: false,
    }
  },
  computed: {
    ...mapState(['wxCheckType']),
    ...mapGetters(['userInfo'])
  },
  onLoad() {
    if (this.userInfo.companyId) {
      this.getDBDetail()
    }
  },
  methods: {
    async getDBDetail() {
      uni.showLoading({title: '加载中', mask: true})
      let res = await this.$api.getCompanyById(this.userInfo.companyId)
      uni.hideLoading()
      if (res.success) {
        let tResult = res.result || {}
        this.id = tResult.id || ''
        this.richtext = tResult.content || ''
        this.fileImgs = tResult.carousel
        this.video = tResult.video
      } else {
        uni.showToast({title: res.message || '获取简介失败！', icon: 'none'});
      }
    },
    getRichText() {
      const that = this
      return new Promise((resolve, reject) => {
        that.$refs.editor.getContents(res => {
          // console.log(res);
          res.html = handleHtmlImage(res.html)
          resolve(res.html)
        })
      })
    },
    async submit() {
      let tContent = await this.getRichText()
      let params = {
        id: this.id || '',
        companyId: this.userInfo.companyId,
        openId: this.userInfo.openId,
        content: tContent,
        carousel: this.$refs.SwiperUpload.getUrl(),
        video: this.$refs.VideoUpload.getUrl(),
        url: ''
      }
      // console.log(params);
      this.loading = true
      let res = {}
      if (params.id) {
        res = await this.$api.editCompanyIndexPage(params)
      } else {
        res = await this.$api.addCompanyIndexPage(params)
      }
      this.loading = false
      if (res.success) {
        uni.showToast({title: '提交成功！', icon: 'none'});
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      } else {
        uni.showToast({title: res.message || '提交失败！', icon: 'none'});
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: calc(206rpx + constant(safe-area-inset-bottom) + 265px);
  padding-bottom: calc(206rpx + env(safe-area-inset-bottom) + 265px);
}

.contain-box {
  padding: 32rpx;

  .contain-title {
    font-size: 26rpx;
    color: #1D2129;
    line-height: 36rpx;
  }

  .contain-content {
    margin-top: 16rpx;
  }

  ::v-deep .editor-container {
    .fixed-top {
      display: none !important;
    }

    scroll-view {
      height: unset !important;
    }
  }
}

.submit-box {
  position: fixed;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  padding: 16rpx 48rpx;
  box-sizing: border-box;
}
</style>
